<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.min.js"></script>
		<script src="./js/layui/layui.js"></script>
		<link rel="stylesheet" href="js/layui/css/layui.css" media="all"/>
		<style>
			body{
				perspective: 1000px;
			}
			.main{
				position: relative;
				width: 500px;
				height: 300px;
				margin: 200px auto;
			}
			.main>div{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background:url(./img/cat.jpg) no-repeat;
			}
			/* class为.main的盒子内部的第一个div盒子 */
			.main>div:nth-child(1){
				transform:translateZ(400px);
			}
		</style>
	</head>
	<body>
		
		<div class="main">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		
	</body>
</html>
